<template>
  <div class="jumpurl-setting-form">
    <PanelLabelOverflowTooltip ref="panelLabelOverflowTooltip" />
    <el-form
      ref="form"
      v-panel-label-overflow-tooltip="getPanelLabelOverflowTooltip()"
      v-visual-form
      class="form"
      label-position="right"
      :model="form"
      :rules="rules"
      label-width="85px"
    >
      <div
        class="jump-panel-wrapper"
        style="text-align: center;"
      >
        <VsFormItem prop="linkType">
          <el-radio-group
            v-model="form.linkType"
            size="default"
            @change="linkTypeChange"
          >
            <el-radio label="link">{{ $demoi18n('word.link') }}</el-radio>
            <el-radio label="page">{{ $demoi18n('word.page') }}</el-radio>
          </el-radio-group>
        </VsFormItem>
      </div>

      <!-- 输入网址跳转 -->
      <div v-if="form.linkType === 'link'" class="jump-panel-wrapper">
        <VsFormItem prop="jumpUrl" contWidth="100%">
          <el-input
            v-model="form.jumpUrl"
            type="textarea"
            autosize
            :placeholder="$demoi18n('jumpUrl.placeholder')"
          ></el-input>
        </VsFormItem>
        <div class="vars_list">
          <el-button
            v-if="form.linkVars.length === 0"
            :link="true"
            type="primary"
            icon="Plus"
            @click="addVar()"
          >{{ $demoi18n('advLinage.addingVariables') }}</el-button>
          <table v-else>
            <tr>
              <th width="120">{{ $demoi18n('word.variable') }}</th>
              <th width="100">{{ $demoi18n('word.sources') }}</th>
              <th width="120">{{ $demoi18n('word.value') }}<Helptip :width="400">{{ $demoi18n('advancedLinkage.varTip') }}</Helptip>
              </th>
              <th width="20">
                <el-button
                  :link="true"
                  type="primary"
                  icon="Plus"
                  size="default"
                  @click="addVar()"
                ></el-button>
              </th>
            </tr>
            <tr v-for="(n, i) in form.linkVars" :key="i">
              <td>
                <ValueInputer v-model:value="n.varKey" required />
              </td>
              <td>
                <ValueInputer v-model:value="n.equalTo" valueType="List" :enumValues="equalTypes" required />
              </td>
              <td>
                <ValueInputer
                  v-if="n.equalTo === 'field'"
                  v-model:value="n.field"
                  valueType="List"
                  :enumValues="fields"
                  required
                />
                <ValueInputer v-if="n.equalTo === 'event'" v-model:value="n.event" required />
                <ValueInputer v-if="n.equalTo === 'url'" v-model:value="n.urlKey" required />
                <ValueInputer v-if="n.equalTo === 'inputVal'" v-model:value="n.inputVal" required />
              </td>
              <td>
                <el-button
                  :link="true"
                  type="primary"
                  icon="Delete"
                  size="default"
                  @click="delVar(i)"
                ></el-button>
              </td>
            </tr>
          </table>
        </div>
      </div>

      <!-- 下拉页面跳转 -->
      <template v-if="form.linkType === 'page'">
        <VsFormItem
          v-if="!isAurora"
          :label="$demoi18n('word.site')"
          prop="siteId"
        >
          <el-select
            v-model="form.siteId"
            :class="'panel-data-select-' + xvueTheme"
            :popper-class="'select-poper-' + xvueTheme"
            size="default"
            style="width:100%;"
            @change="siteChange"
          >
            <el-option
              v-for="site in siteList"
              :key="site.applicationUuid"
              :label="site.name"
              :value="site.applicationUuid"
            ></el-option>
          </el-select>
        </VsFormItem>
        <VsFormItem
          :label="$demoi18n('word.catalog')"
          prop="directoryId"
        >
          <el-select
            v-model="form.directoryId"
            :class="'panel-data-select-' + xvueTheme"
            :popper-class="'select-poper-' + xvueTheme"
            size="default"
            style="width:100%;"
            @change="directoryChange"
          >
            <el-option
              v-for="directory in directoryList"
              :key="directory.uuid"
              :label="directory.directoryName"
              :value="directory.uuid"
            ></el-option>
          </el-select>
        </VsFormItem>
        <VsFormItem
          :label="$demoi18n('word.page')"
          prop="pageId"
        >
          <el-select
            v-model="form.pageId"
            :class="'panel-data-select-' + xvueTheme"
            :popper-class="'select-poper-' + xvueTheme"
            size="default"
            style="width:100%;"
            @change="pageChange"
          >
            <el-option
              v-for="page in pageList"
              :key="page.uuid"
              :label="page.pageName"
              :value="page.uuid"
            ></el-option>
          </el-select>
        </VsFormItem>
      </template>

      <VsFormItem
        :label="`${$demoi18n('common.openInNewPage')}:`"
        label-width="110px"
      >
        <el-radio-group
          v-model="form.isOpenNewPage"
          class="isOpenNewPage"
        >
          <el-radio :label="true">{{ $demoi18n('word.yes') }}</el-radio>
          <el-radio :label="false">{{ $demoi18n('word.no') }}</el-radio>
        </el-radio-group>
      </VsFormItem>
    </el-form>
  </div>
</template>

<script>
import Helptip from '@/components/common/helptip/helptip.vue';
import PanelLabelOverflowTooltip from '@/components/common/overflow-tooltip/overflow-tooltip.vue';
import ValueInputer from '@/components/common/value-inputer/value-inputer.vue';
import jumpUrlBase from '@/mixin/jump-url-base';
import { generateRules, generateUrlRule, genRequireRule } from '@/utils/rules';

export default {
  name: 'JumpUrlSetting',
  components: { PanelLabelOverflowTooltip, ValueInputer, Helptip },
  mixins: [jumpUrlBase],
  props: {
    form: {
      type: Object,
      default: () => ({
        linkType: 'page', // link | page
        jumpUrl: '',
        siteId: '',
        directoryId: '',
        pageId: '',
        isOpenNewPage: true,
        linkVars: [], // 跳转链接变量
      }),
    },
    fields: Array, // 跳转字段选项
  },
  data() {
    return {
      isAurora: this.$platformName === 'Aurora',
      xvueTheme: window._adoPremise.uc.theme,
      index: 0,
      rules: {
        jumpUrl: generateUrlRule({ required: true }),
        siteId: genRequireRule({
          label: this.$demoi18n('word.site'),
        }),
        directoryId: genRequireRule({
          label: this.$demoi18n('word.catalog'),
        }),
        pageId: genRequireRule({
          label: this.$demoi18n('word.page'),
        }),
      },
      equalTypes: [
        { label: this.$demoi18n('word.field'), value: 'field' },
        { label: this.$demoi18n('word.event'), value: 'event' },
        { label: this.$demoi18n('advLinage.urlParameter'), value: 'url' },
        { label: this.$demoi18n('placeholder.inputValue'), value: 'inputVal' },
      ],
    };
  },
  computed: {
    thisComp() {
      return this;
    },
  },
  watch: {},
  created() {
    this.getSiteListNew();
    this.initLinkVars();
  },
  methods: {
    genRequireRule,
    generateRules,
    getPanelLabelOverflowTooltip() {
      return {
        parentComp: this,
      };
    },
    initLinkVars() {
      if (!this.form.linkVars) {
        this.form.linkVars = [];
      }

      // 兼容行业基线历史数据
      this.form.linkVars.forEach(n => {
        if (!n.equalTo) {
          n.equalTo = 'field';
        }
      });
    },
    addVar() {
      this.form.linkVars.push({
        varKey: '',
        field: '',
        event: '', // 形式: event 或 event.category
        urlKey: '', // url传参
        equalTo: 'field',
      });
    },
    delVar(index) {
      this.form.linkVars.splice(index, 1);
    },
  },
};
</script>

<style lang="less">
@import '../../../common/color-picker-panel.less';
</style>
<style lang="less" scoped>
.jumpurl-setting-form {
  .form {
    width: 100%;
    :deep(.el-form-item) {
      margin-bottom: 0;
      .el-form-item__label {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
    .is-error {
      margin-bottom: 15px;
    }
    .el-form-item__error {
      top: 100%;
      padding-top: 0;
    }
    .jump-panel-wrapper {
      width: 100%;
      padding: 0 10px;
      box-sizing: border-box;
      :deep(.el-form-item__content) {
        margin-left: 0 !important;
      }
      .jump-text {
        width: 100%;
        line-height: 25px;
        font-size: 12px;
        span {
          color: #ff3b3b;
        }
      }
      .vars_list {
        margin-top: 10px;
        table {
          th {
            font-weight: normal;
          }
        }
      }
    }
  }
}

.action-button-group {
  text-align: right;
  padding-top: 20px;
  .button-sure {
    padding: 9px 35px;
    border-radius: 0;
  }
  .button-cancel {
    padding: 9px 35px;
    border-radius: 0;
  }
}
</style>
